<template>
  <div class="app TirePageContent">
    <div class="cont1200">
      <div class="bread">
        <myBradcrumb></myBradcrumb>
      </div>
      <myGroup></myGroup>
      <div class="productsHeader">
        <ul>
          <li>推荐</li>
          <li>销量</li>
          <li>评分</li>
          <li>价格</li>
        </ul>

        <div class="TPCright">
          <span>共22个商品</span>
          <i class="el-icon-arrow-left"></i>
          <span>1</span>
          <span>/</span>
          <span>2</span>
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>

      <div class="productsList" v-for="item in SearchListings" :key="item.id">
        <div class="ProLeft">
          <img :src="item.spimgurl" alt />
        </div>
        <div class="ProMed">
          <span>{{item.title}}</span>
          <ul>
            <li v-for="item2 in item.listData" :key="item2.id">{{item2.t1}}{{item2.ti}}</li>
          </ul>
        </div>

        <div class="Proright">
          <div>
            <span class="proJg">¥{{item.projg}}</span>
            <span class="proqi">包安装</span>
          </div>
          <div class="buyNow">立即购买</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import myBradcrumb from "../../components/Breadcrumb/Breadcrumb";
import myGroup from "../../components/Group/group";

export default {
  data() {
    return {
      breadlist: [{ name: "轮胎" }],

      SearchListings: [
        {
          spimgurl:
            "https://img3.tuhu.org/Images/Products/5442/0af3/27c173e623110195452fe804_w800_h800.png@142w_145h_100Q.png",
          title:
            "倍耐力轮胎 新P7 Cinturato P7 KA 205/50R17 89W R-F缺气保用（防爆）轮胎 ☆ 宝马原装星标 Pirelli[宝马1系原配] 防爆胎 操控 舒适 新P7花纹升级产品",
          listData: [
            { tl: "轮胎类型：", ti: " 商务型轿车胎" },
            { tl: "载重指数：", ti: " 89(最大载重 580千克)" },
            { tl: "轮胎花纹：", ti: " CP7 KA" },
            { tl: "速度级别：", ti: " W(最高时速 270km/h)" }
          ],
          projg: "1,085.00"
        },  {
          spimgurl:
            "https://img3.tuhu.org/Images/Products/5442/0af3/27c173e623110195452fe804_w800_h800.png@142w_145h_100Q.png",
          title:
            "倍耐力轮胎 新P7 Cinturato P7 KA 205/50R17 89W R-F缺气保用（防爆）轮胎 ☆ 宝马原装星标 Pirelli[宝马1系原配] 防爆胎 操控 舒适 新P7花纹升级产品",
          listData: [
            { tl: "轮胎类型：", ti: " 商务型轿车胎" },
            { tl: "载重指数：", ti: " 89(最大载重 580千克)" },
            { tl: "轮胎花纹：", ti: " CP7 KA" },
            { tl: "速度级别：", ti: " W(最高时速 270km/h)" }
          ],
          projg: "1,085.00"
        },  {
          spimgurl:
            "https://img3.tuhu.org/Images/Products/5442/0af3/27c173e623110195452fe804_w800_h800.png@142w_145h_100Q.png",
          title:
            "倍耐力轮胎 新P7 Cinturato P7 KA 205/50R17 89W R-F缺气保用（防爆）轮胎 ☆ 宝马原装星标 Pirelli[宝马1系原配] 防爆胎 操控 舒适 新P7花纹升级产品",
          listData: [
            { tl: "轮胎类型：", ti: " 商务型轿车胎" },
            { tl: "载重指数：", ti: " 89(最大载重 580千克)" },
            { tl: "轮胎花纹：", ti: " CP7 KA" },
            { tl: "速度级别：", ti: " W(最高时速 270km/h)" }
          ],
          projg: "1,085.00"
        },  {
          spimgurl:
            "https://img3.tuhu.org/Images/Products/5442/0af3/27c173e623110195452fe804_w800_h800.png@142w_145h_100Q.png",
          title:
            "倍耐力轮胎 新P7 Cinturato P7 KA 205/50R17 89W R-F缺气保用（防爆）轮胎 ☆ 宝马原装星标 Pirelli[宝马1系原配] 防爆胎 操控 舒适 新P7花纹升级产品",
          listData: [
            { tl: "轮胎类型：", ti: " 商务型轿车胎" },
            { tl: "载重指数：", ti: " 89(最大载重 580千克)" },
            { tl: "轮胎花纹：", ti: " CP7 KA" },
            { tl: "速度级别：", ti: " W(最高时速 270km/h)" }
          ],
          projg: "1,085.00"
        },  {
          spimgurl:
            "https://img3.tuhu.org/Images/Products/5442/0af3/27c173e623110195452fe804_w800_h800.png@142w_145h_100Q.png",
          title:
            "倍耐力轮胎 新P7 Cinturato P7 KA 205/50R17 89W R-F缺气保用（防爆）轮胎 ☆ 宝马原装星标 Pirelli[宝马1系原配] 防爆胎 操控 舒适 新P7花纹升级产品",
          listData: [
            { tl: "轮胎类型：", ti: " 商务型轿车胎" },
            { tl: "载重指数：", ti: " 89(最大载重 580千克)" },
            { tl: "轮胎花纹：", ti: " CP7 KA" },
            { tl: "速度级别：", ti: " W(最高时速 270km/h)" }
          ],
          projg: "1,085.00"
        },  {
          spimgurl:
            "https://img3.tuhu.org/Images/Products/5442/0af3/27c173e623110195452fe804_w800_h800.png@142w_145h_100Q.png",
          title:
            "倍耐力轮胎 新P7 Cinturato P7 KA 205/50R17 89W R-F缺气保用（防爆）轮胎 ☆ 宝马原装星标 Pirelli[宝马1系原配] 防爆胎 操控 舒适 新P7花纹升级产品",
          listData: [
            { tl: "轮胎类型：", ti: " 商务型轿车胎" },
            { tl: "载重指数：", ti: " 89(最大载重 580千克)" },
            { tl: "轮胎花纹：", ti: " CP7 KA" },
            { tl: "速度级别：", ti: " W(最高时速 270km/h)" }
          ],
          projg: "1,085.00"
        },  {
          spimgurl:
            "https://img3.tuhu.org/Images/Products/5442/0af3/27c173e623110195452fe804_w800_h800.png@142w_145h_100Q.png",
          title:
            "倍耐力轮胎 新P7 Cinturato P7 KA 205/50R17 89W R-F缺气保用（防爆）轮胎 ☆ 宝马原装星标 Pirelli[宝马1系原配] 防爆胎 操控 舒适 新P7花纹升级产品",
          listData: [
            { tl: "轮胎类型：", ti: " 商务型轿车胎" },
            { tl: "载重指数：", ti: " 89(最大载重 580千克)" },
            { tl: "轮胎花纹：", ti: " CP7 KA" },
            { tl: "速度级别：", ti: " W(最高时速 270km/h)" }
          ],
          projg: "1,085.00"
        },
      ]
    };
  },
  methods: {},
  components: {
    myBradcrumb,
    myGroup
  }
};
</script>

<style lang="scss" type="text/css" scoped>
@import "../../common/style.scss";
.app {
  .bread {
    padding: 10px;
  }
}
.TirePageContent {
  .productsHeader {
    height: 30px;
    background-color: rgba(253, 0, 0, 0.116);
    padding: 5px 5px;
    li {
      float: left;
      margin-left: 5px;
      width: 55px;
      height: 25px;
      line-height: 25px;
      cursor: pointer;
      border: 1px rgb(146, 146, 146) solid;
      text-align: center;
      background-color: white;
      font-size: 15px;
    }
    li:hover {
      background-color: $main-color;
      color: white;
    }
    span,
    i {
      cursor: pointer;
      line-height: 25px;
      font-size: 15px;
    }
    .TPCright {
      float: right;
      margin-right: 5px;
    }
  }
  .productsList {
    border-bottom: 1px rgb(185, 48, 48) solid;
    height: 150px; 
    padding: 10px;
    .ProLeft,
    .ProMed,
    .Proright {
      float: left;
      // background-color: aqua;
    }
    .ProLeft {
      width: 200px;
      text-align: center;
    }
    .ProMed {
      width: 800px;
      color: $alink;
      span {
        display: block;
        height: 50px;
        overflow: hidden;
      }
      ul {
        margin-top: 5px;
      }
      li {
        float: left;
        width: 50%;
        font-size: 14px;
      }
    }
    .Proright {
      padding-top: 20px;
      .proJg {
        font-size: 25px;
        color: red;
        font-weight: 800;
      }
      .buyNow {
        background-color: rgb(224, 2, 2);
        color: white;
        text-align: center;
        cursor: pointer;
        padding: 10px;
        margin-top: 10px;
      }
      .buyNow:hover{
        background-color: rgb(204, 7, 7);

      }
      .proqi {
        font-size: 15px;
      }
    }
  }
}
</style>
